<template>
<div id="root">
  <!--
		需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
		需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
	-->

  <h2>当前的n值是: <span v-text="n"></span> </h2>
  <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
  <button @click="n++">点我n+1</button>
  <hr>
  <input type="text" v-fbind:value="n">
</div>
</template>

<script>
export default {
  name: "ZiDingYiZhiLing",
  data() {
    return {
      n: 1,
    }
  },
  directives: {
    //big函数何时会被调用？1.指令与元素成功绑定时(一上来) 2.指令所在的模板被重新解析时
    big(element, binding) {
      console.log('big', this) //注意此处的this是window
      element.innerText=binding.value * 10
    },
    fbind: {
      //指令与元素成功绑定时(一上来)
      bind(element, binding) {
        element.value = binding.value
      },
      //指令所在元素被插入页面时
      inserted(element, binding) {
        element.focus()
      },
      //指令所在的模板被重新解析时
      update(element, binding){
        element.value = binding.value
      }
    }
  }
}
</script>

<style scoped>

</style>
